<template>
  <div>
    <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      :autoFill="false"
      ref="loadmore"
    >
      <div class="source-list">
        <div class="source-list-detail">
          <div @click="makenew" class="source-list-detail-left">
            <img src="../assets/img/banner.png" alt />
          </div>
          <div class="source-list-detail-right">
            <div>
              <p>Oaks at moss park</p>
              <!-- 打新 -->
              <img
                @click="$router.push({name:'activityItem',query:{activityType:'new'}})"
                v-show="true"
                src="../assets/img/daxin.png"
                alt
              />
              <!-- 结束 -->
              <img v-show="false" src="../assets/img/daxin1.png" alt />
            </div>
            <div>
              <p>
                可申购：
                <span>1000</span>Token
              </p>
              <p>
                已申购：
                <span>30</span>人
              </p>
            </div>
            <p>距开始：01天19:56:16</p>
            <p v-show="false">已结束</p>
          </div>
        </div>
      </div>
      <!-- 拍卖 -->
      <div class="source-list">
        <div class="source-list-detail">
          <div class="source-list-detail-left">
            <img src="../assets/img/banner.png" alt />
          </div>
          <div class="source-list-detail-right">
            <div>
              <p>Oaks at moss park</p>
              <!-- 拍卖 -->
              <img
                @click="$router.push({name:'activityItem',query:{activityType:'auction'}})"
                v-show="true"
                src="../assets/img/paimai.png"
                alt
              />
              <!-- 结束 -->
              <img v-show="false" src="../assets/img/daxin1.png" alt />
            </div>
            <div>
              <p>
                当前价：
                <span>1000</span>Token
              </p>
              <p>
                已出价：
                <span>30</span>人
              </p>
            </div>
            <p>距开始：01天19:56:16</p>
            <p v-show="false">已结束</p>
          </div>
        </div>
      </div>
      <!-- 众筹 -->
      <div class="source-list">
        <div class="source-list-detail">
          <div class="source-list-detail-left">
            <img src="../assets/img/banner.png" alt />
          </div>
          <div class="source-list-detail-right">
            <div>
              <p>Oaks at moss park</p>
              <!-- 众筹 -->
              <img
                @click="$router.push({name:'activityItem',query:{activityType:'bulk'}})"
                v-show="true"
                src="../assets/img/tuangou.png"
                alt
              />
              <!-- 结束 -->
              <img v-show="false" src="../assets/img/daxin1.png" alt />
            </div>
            <div>
              <p>1000USDT</p>

              <div class="mt-progress list-line">
                <div class="mt-progress-content">
                  <div class="mt-progress-runway"></div>
                  <div class="mt-progress-progress"></div>
                </div>
              </div>
              <p>
                USDT
                <span>|</span>4000USDT
              </p>
            </div>
            <p>距开始：01天19:56:16</p>
            <p v-show="false">已结束</p>
          </div>
        </div>
      </div>
      <!-- 团购 -->
      <div class="source-list">
        <div class="source-list-detail">
          <div class="source-list-detail-left">
            <img src="../assets/img/banner.png" alt />
          </div>
          <div class="source-list-detail-right">
            <div>
              <p>Oaks at moss park</p>
              <!-- 团购 -->
              <img
                @click="$router.push({name:'activityItem',query:{activityType:'raise'}})"
                v-show="true"
                src="../assets/img/zhongchou.png"
                alt
              />
              <!-- 结束 -->
              <img v-show="false" src="../assets/img/daxin1.png" alt />
            </div>
            <div>
              <p>
                团购价：
                <span>1000</span>USDT
              </p>
              <p>
                已成团：
                <span>30</span>人
              </p>
            </div>
            <p>距开始：01天19:56:16</p>
            <p v-show="false">已结束</p>
          </div>
        </div>
      </div>
    </mt-loadmore>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //加载
      allLoaded: false, //数据是否加载完毕
      pageNum: 0
    };
  },
  methods: {
    // 打新详情
    makenew(){
       this.$router.push({ name: "makenew" });
     
    },
    //下拉刷新
    loadTop() {
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded();
      }, 1000);
    },
    //上拉加载
    loadBottom() {
      this.pageNum++;
      console.log(3333);
      setTimeout(() => {
        this.$refs.loadmore.onBottomLoaded();
      }, 1000);
    }
  }
};
</script>
<style lang="less" scoped>
.source-list {
  padding: 10px 15px 15px;
  .source-list-detail {
    .flexBetween();
    width: 100%;
    height: 128px;
    padding: 10px;
    box-shadow: 0 0 8px 2px #eee;
    // margin-bottom: 20px;
    .source-list-detail-left {
      width: 40%;
      .flexCenterContent();
      margin-right: 10px;
      position: relative;
      div:nth-child(2) {
        position: absolute;
        left: 10%;
        top: 70%;
        width: 80%;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 12px;
        color: @white;
        padding: 4px 2px;
        .flexCenterCenter();
        border-radius: 4px;
        img {
          width: 10px;
          margin-right: 4px;
        }
      }
    }
    .source-list-detail-right {
      width: 60%;
      .flexStart();
      flex-direction: column;
      div:nth-child(1) {
        flex: 1;
        font-size: 16px;
        font-weight: bold;
        p {
          color: @blackColor8;
        }
        .flexBetweenCenter();
        img {
          width: 50px;
        }
      }
      div:nth-child(2) {
        flex: 1;
        p {
          font-size: 12px;
          color: @blackColor5;
          span {
            font-size: 15px;
            color: @blueColor5;
            padding: 0 4px;
          }
        }
      }
      p:nth-child(3) {
        flex: 1;
        font-size: 12px;
        color: @blackColor5;
        .flexStartCenter();
      }
    }
  }
}
.list-line {
  height: 7px;
  .mt-progress-content {
    height: 7px;
    .mt-progress-runway {
      border-radius: 10px;
      overflow: hidden;
      background-color: @white;
      border: 1px solid @blackColor3;
      height: 7px;
    }
    .mt-progress-progress {
      border-radius: 10px;
      overflow: hidden;
      width: 20%;
      height: 7px;
    }
  }
}
</style>
